const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const henXian = document.querySelector('.henXian')

const circles = document.querySelectorAll('.circle')

let currentActive = 0;
let width=0;
next.addEventListener('click', function () {
  currentActive++

  if(currentActive > circles.length) {
      currentActive = circles.length
  }
  update();
  width+=125;
  henXian.children[0].style.width=width +'px'
});

prev.addEventListener('click', function () {
  currentActive--
  if(currentActive < 0) {
      currentActive = 0
  }
  update()
  width-=125;
  henXian.children[0].style.width=width +'px'
});


function update() {
  circles.forEach((circle, index) => {
    if (index === currentActive) {
      circle.classList.add('active')
    } else {
      circle.classList.remove('active')
    }
  });
  
  if (currentActive === 0) {
    prev.disabled = true
  } else if (currentActive === circles.length-1) {
    next.disabled = true
  } else {
    prev.disabled = false
    next.disabled = false
  }
}
